<template>
	<view class="music-list">
		<!-- 毛玻璃效果 -->
		<view class="fixbg" :style="{'background-image':'url('+musicList.coverImgUrl+')'}"></view>
		<!-- 头部导航区 -->
		<musichead title="音乐列表" :icon="showHeadIcon" titleColor="#fff"></musichead>
		<!-- 主体内容 -->
		<view class="container"  v-if="loading">
			<scroll-view scroll-y>
				<view class="scroll-container">
					<!-- 头部歌单介绍info -->
					<view class="music-list-info">
						<!-- 左侧图片 -->
						<view class="info-pic">
							<image :src="musicList.coverImgUrl" mode="widthFix"></image>
							<view class="count"><text class="iconfont icon-yousanjiao"></text>{{musicList.playCount | formatCount}}亿</view>
						</view>
						<!-- 右侧信息 -->
						<view class="info-content">
							<text class="info-content-whatList">{{musicList.name}}</text>
							<view class="info-content-iconTitle">
								<image :src="musicList.creator.avatarUrl" mode="widthFix"></image>
								<text>{{musicList.creator.nickname}}</text>
							</view>
							<view class="info-content-introduce">{{musicList.description}}</view>
						</view>
					</view>
					<!-- 头部介绍区完成 -->
					<!-- 分享按钮 -->
					<view class="share">
						<view class="share-icon">
							<text class="iconfont icon-fenxiang"></text>
							<text>分享给微信好友</text>
						</view>
					</view>
					<!-- 分享按钮完成 -->
					<!-- 歌曲列表 -->
					<view class="playList">
						<view class="playAll">
							<text class="iconfont icon-bofang"></text>
							<text class="all">播放全部</text>
							<text class="total">（共100首）</text>
						</view>
						<view class="play-item" v-for="(item, index) in tracks" :key="item.id" @tap="handelToDetail(item.id)">
							<view class="play-index">{{index+1}}</view>
							<view class="play-content">
								<view class="name">{{item.name}}</view>
								<view class="author">{{item.ar[0].name}}</view>
							</view>
							<view class="play-icon">
								<view class="iconfont icon-bofang_o"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musichead from '../../components/musichead/musichead.vue'
	export default {
		components:{
			musichead
		},
		data() {
			return {
				// 控制是否显示图标
				showHeadIcon:true,
				musicList:{
					coverImgUrl:'',
					creator:{}
				},
				
				tracks:[],
				// 加载完成后才显示页面
				loading:false
			}
		},
		methods: {
			async getMusicList(id){
				const res = await this.$request({url:`/playlist/detail?id=${id}`})
				this.musicList = res.playlist
				this.tracks = res.playlist.tracks
				this.loading = true
				// console.log(res.playlist.trackIds)
				// 提交歌单给vuex
				this.$store.commit('GET_PLAYLIST',res.playlist.trackIds)
			},
			handelToDetail(songId){
				uni.navigateTo({
					url:`../music-detail/music-detail?songId=${songId}`
				})
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getMusicList(e.id)
		}
	}
</script>

<style lang="scss" scoped>
.music-list{
	.scroll-container{
		// 头部歌单介绍info
		.music-list-info{
			display: flex;
			// 左侧图片区
				.info-pic{
					flex: 2;
					padding-left: 20rpx;
					position: relative;
					image{
						width: 264rpx;
						border-radius: 10rpx;
					}
					.count{
						font-size: 26rpx;
						color: #fff;
						position: absolute;
						top: 5rpx;
						right: 40rpx;
					}
				}
				// 右侧内容区
				.info-content{
					color: #fff;
					flex: 3;
					padding-left: 10rpx;
					.info-content-whatList{
						font-size: 32rpx;
					}
					.info-content-iconTitle{
						margin-top: 25rpx;
						image{
							width: 54rpx;
							border-radius: 50%;
							vertical-align: middle;
						}
						text{
							margin-left: 10rpx;
							font-size: 28rpx;
						}
					}
					.info-content-introduce{
						margin-top: 25rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						letter-spacing: 2rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;//改变行数
						-webkit-box-orient: vertical;
					}
				}
		}
		// 分享区样式
		.share{
			margin-top: 40rpx;
			.share-icon{
				width: 350rpx;
				height: 70rpx;
				border-radius: 50rpx;
				background-color: #fff;
				color: #000;
				opacity: 0.4;
				text-align: center;
				line-height: 70rpx;
				margin: 0 auto;
			}
		}
		// 播放列表
		.playList{
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			margin-top: 60rpx;
			.playAll{
				line-height: 80rpx;
				.icon-bofang{
					font-size: 80rpx;
					vertical-align: middle;
				}
				.all{
				margin-left: 20rpx;
				}
				.total{
					color: #999;
					font-size: 28rpx;
				}
			}
			.play-item{
				display: flex;
				margin-top: 40rpx;
				.play-index{
					flex: 1;
					text-align: center;
					line-height: 70rpx;
					color: #999;
				}
				.play-content{
					flex: 4;
					.name{
						font-size: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;//改变行数
						-webkit-box-orient: vertical;
					}
					.author{
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
				.play-icon{
					flex: 1;
					line-height: 70rpx;
					.icon-bofang_o{
						font-size: 80rpx;
						color: #999;
					}
				}
			}
		}
	}
}
</style>
